<template>
    <div class="user-selecter-item" v-if="value">
        <user-avatar class="avatar-box" v-model="value.avatar"/>
        <div class="info-box">
            <span class="name">{{value.name}}</span>
            <span class="departmentName">部门：{{value.departmentName}}</span>
        </div>
    </div>
</template>
<script lang="ts">
  // structure
  import User from '@/structure/user';
  import {Component, Model, Prop, Vue} from 'vue-property-decorator';

  @Component
  export default class UserSelectItem extends Vue {
    @Model()
    @Prop({
      required: true
    })
    public value!: User;
  }
</script>
<style>
    .user-selecter-item {
        height: 60px !important;
    }

    .user-selecter-item .avatar-box {
        float: left;
        padding-top: 5px;
    }

    .user-selecter-item .info-box {
        float: right;
    }

    .user-selecter-item .info-box .name,
    .user-selecter-item .info-box .departmentName {
        display: block;
        text-align: right;
    }

    .user-selecter-item .info-box .name {
        font-size: 14px;
        line-height: 34px;
    }

    .user-selecter-item .info-box .departmentName {
        font-size: 12px;
        line-height: 12px;
        color: #aaa;
    }
</style>
